<template>
	<view class="">
		<view class="join_top">
			<img src="../../static/join.png" alt="">
			<view class="join_top11">
				<h2 class="join_top12">加入成功</h2>
				<view class="">请完善下列个人信息</view>
			</view>
		</view>
		<view class="xxxx">
			<view class="qqqq">理货员信息</view>
			<view class="q1">
				<span class='q2'>姓名</span>
				<input type="text" class="q3"
					style="text-align: right;"
					v-model="clerk_name" placeholder="请输入店员姓名" placeholder-style="font-size:12px;">
			</view>
			<view class="q1" style="border: 0;">
				<span class='q2'>手机号</span>
				<input type="text" class="q3" placeholder="请输入店员手机号"   v-model="clerk_phone" style="text-align: right;" placeholder-style="font-size:12px;">
			</view>
		</view>
		
		<button class="ww" @click="save_fn()">保存</button>	
	</view>
	
</template>

<script>
	export default{
		data(){
			return {
				clerk_name:'',
				clerk_phone:''
			}
		},
		methods:{
			save_fn(){
				// console.log(this.clerk_name);
				// console.log(this.clerk_phone);
				const date = new Date();
			    const time = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
				
				console.log(time);
				uni.request({
					url:'http://localhost:3000/insert_clerk_info',
					data:{
						clerk_name:this.clerk_name,
						clerk_phone:this.clerk_phone,
						time:time
					},
					success: (res) => {
						console.log(res.data);
					}
				}),
				uni.navigateTo({
					url:'../gao/salesclerk'
				})
			}
		}
	}
</script>

<style>
	.q1{
		display: flex;
		width: 90%;
		font-size: 16px;
	   font-weight: bold;
		margin: 0 auto;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}
	.q2{
		margin-top: 20px;
		flex: 3;
		margin-left: 10px;
	}
	.q3{
		margin-top: 20px;
		flex: 7;
		margin-right: 10px;
		margin-bottom: 5px;
	}
	img{
		width: 40px;
		height: 40px;
		position: absolute;
	}
	.join_top{
		width: 85%;
		background-color: azure;
		margin: 0 auto;
		margin-top: 30px;
		margin-bottom: 30px;
		padding: 10px;
		border-radius: 5px;
	}
	.join_top11{
		margin-left: 50px;
	}
	.join_top12{
		color: #fccc04;
		
	}
	.ww{
		width: 90%;
		margin: 0 auto;
		color: black;
		font-weight: bolder;
		background-color: #fccc04;
		margin-top: 50px;
	}
	.qqqq{
		width: 90%;
		margin: 0 auto;
		font-weight: bold;
		margin-left: 20px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1) ;
		padding-bottom: 10px;
		padding-left: 10px;
	}
	.xxxx{
		background-color: aliceblue;
		width: 90%;
		margin: 0 auto;
		padding: 10px;
		border-radius: 5px;
	}
</style>